<template>
    <view class="list-item">
        <view class="i-head">
            <image src="/static/img/erp/icon_ck_report.png" class="icon"></image>
            <view class="info">
                <view class="name">{{ item.KName }}</view>
            </view>
        </view>
        <view class="i-con">
            <view class="i-c-item">
                <view class="num">{{ item.Qty }}</view>
                <view class="unit">库存余量</view>
                <view class="line"></view>
            </view>
            <view class="i-c-item">
                <view class="num">{{ item.Total }}</view>
                <view class="unit">余量成本</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {}
    },
    mounted() {},
    onShow() {},
    methods: {},
}
</script>

<style lang="scss">
.list {
    margin: 0 $app-page-padding 0;
    padding: 0 $app-page-padding;
    background: $color-white;
    .list-item {
        padding: 28rpx 0 34rpx;
        border-bottom: #ebebeb solid 1px;
        .i-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32rpx;
            .icon {
                display: inline-flex;
                width: 20px;
                height: 20px;
                margin-right: 4rpx;
            }
            .info {
                flex: 1;
                .name {
                    font-size: $size-28;
                    font-weight: bold;
                    // padding-bottom: 12rpx;
                    // align-items: center;
                }
                .code {
                    font-size: $size-28;
                    color: $color-gray-3;
                }
            }
        }
        .i-con {
            display: flex;
            align-items: center;
            .i-c-item {
                box-sizing: border-box;
                position: relative;
                display: flex;
                width: 50%;
                padding: 0 8rpx;
                flex-flow: column;
                align-items: center;
                .num {
                    font-size: $size-32;
                    word-break: break-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
                .unit {
                    font-size: $size-22;
                    color: $color-gray-3;
                }
                .line {
                    position: absolute;
                    top: 16rpx;
                    right: 0;
                    width: 1px;
                    height: 48rpx;
                    background: #ebebeb;
                }
            }
        }
    }
}
</style>
